.bella-header-container {
  width: 100%;

  // .top-gradient {
  //   background: linear-gradient(135deg, #D4E9FC 0%, #B9DEF7 100%);
  //   padding: 24px 16px 16px;
  //   position: relative;
  //   overflow: hidden;
  // }

  .top-gradient {
    background: linear-gradient(135deg, #D4E9FC 0%, #B9DEF7 100%);
    padding: 12px 24px 12px;
    position: relative;
    overflow: hidden;
  }

  // .header-content {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   position: relative;
  //   z-index: 10;
  // }

  .header-content {
    position: relative;
    z-index: 10;
  }

  .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //margin-bottom: 16px;
  }

  .logo-container {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .logo-icon {
    // width: 40px;
    // height: 40px;
    // background: white;
    // border-radius: 50%;
    // display: flex;
    // align-items: center;
    // justify-content: center;
    // box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    // color: #1EB7D8;
    // font-size: 18px;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
  }

  .circle-button {
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    animation: floating 3s ease-in-out infinite;
    // margin-right: 5px;

    .back-icon {
      color: #1EB7D8;
      font-size: 18px;
    }

    .star-icon {
      color: #FFD700;
      font-size: 18px;
    }
  }

  .header-title {
    font-size: clamp(1.2rem, 4vw, 1.7rem);
    font-weight: bold;
    color: #1EB7D8;
    background-color: #fff;
    padding: 4px 12px;
    border-radius: 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    margin: 0;
    font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    max-width: 180px;
    text-overflow: ellipsis;
  }

  .welcome-message {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 10px;
    display: inline-block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .welcome-message p {
    margin: 0;
    color: #0A6E8A;
    font-size: clamp(0.875rem, 2.5vw, 1rem);
  }

  .welcome-message p:first-child {
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 500;
    margin-bottom: 4px;
  }

  .floating-circle {
    position: absolute;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: floating 3s ease-in-out infinite;
    width: 48px;
    height: 48px;
    background-color: #FFEB3B;
    top: 64px;
    right: -16px;

    &.yellow {
      width: 48px;
      height: 48px;
      background-color: #FFEB3B;
      top: 64px;
      right: -16px;
    }

    &.pink {
      width: 32px;
      height: 32px;
      background-color: #FF9E9E;
      left: 30px;
      bottom: 40px;
      animation-delay: 0.5s;
    }

    &.green {
      width: 32px;
      height: 32px;
      background: #C8E6C9;
      right: 33.333%;
      top: 40px;
      animation-delay: 0.6s;
    }
  }

  @keyframes floating {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-6px);
    }

    100% {
      transform: translateY(0px);
    }
  }
}